import React, { Component } from 'react';
import { Form, Input, Button, Toast } from 'antd-mobile'
import '../../styles/Phone.scss'
import service from '../../api'
class phone extends Component {
    constructor(props){
        super(props)
        this.state={
            tel:'',

        }
    }

    // 监听属性，获取value值赋值给自定义值
    onChange=(e)=>{
        this.setState({
            [e.target.name]:e.target.type == 'checkbox' ? e.target.checked :e.target.value})
    }
    back() {
        this.props.history.go(-1)
    }
     async tocode(){
        var reg1 = /^1\d{10}$/
        var res1 = reg1.test(this.state.tel)
        if(this.state.tel == ''){
            Toast.show({content:'手机号码不能为空'})
        }else{
            if(!res1){
                Toast.show({content:'手机号码格式有误'})
            }else{
                var res = await service.user.user_docheckphone({tel:this.state.tel})
                if(res.data.code == 200){
                    
                    this.props.history.push('/register/code',{tel:this.state.tel})
                }else if(res.data.code == 10005){
                    Toast.show({content:res.data.message})
                }
            }
        }
    }
    render() {
        return (
            <div className='phone'>
                <div className="form">
                    <input type='text' placeholder='请输入手机号' name='tel' value={this.state.tel} onChange={(e)=>{this.onChange(e)}} />
                </div>
                <div className="btn">
                    <Button block size='large' onClick={()=>{this.tocode()}}>
                        下一步
                    </Button>
                </div>
            </div>
        );
    }
}

export default phone;